<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/vue.js"></script>
		<style>
			.ball{
				width: 25px;
				height: 25px;
				background-color: red;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="button" value="小球动画" @click="flag=!flag" />
			<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" >
				<mycom1 v-if="flag"></mycom1>
			</transition>
			
		</div>
		<template id="tmp1">
			<div>
				<p class="ball" style="text-align: center;">球</p>
			</div>
		</template>
		<script>
			
			Vue.component('mycom1',{
				template: '#tmp1'
			})
			
			
			var vm = new Vue({
				el: '#app',
				data: {
					flag:false
				},
				methods: {
					beforeEnter(el){
						el.style.transform='translate(0,0)'
					},
					enter(el,done){
						el.offsetHeight
						el.style.transform='translate(200px,300px)'
						el.style.transition='all 1s ease'
						done()
					},
					afterEnter(el){
						this.flag=!this.flag
					}
				}
			})
		</script>
	</body>
</html>
